import React from 'react'
import Ionicon from 'react-ionicons'
import PropTypes from 'prop-types'

const PriceList = ({ items, onModifyItem, onDeleteItem}) => {
  return (
    <ul className="list-group list-grop-flush">
      {
        items.map((item) => (
          <li className="list-group-item d-flex justify-content-between align-items-center"
          key={item.id}
          >
            <span className="col-1 badge ">
              <Ionicon className="rounded-circle" fontSize="30px"
              style={{ backgroundColor:'#007bff', padding:'5px'}}
              color={'#fff'}
              icon={item.category.iconName}
              ></Ionicon>
            </span>
            <span className="col-5">{item.title}</span>
            <span className="col-2 fw-bold">
              {item.category.type === 'income'? '+':'-'}
              {item.price}元
            </span>
            <span className="col-2">{item.date}</span>
            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
            <a className="col-1 btn"
              onClick={() => {onModifyItem(item)}}
            >
              <Ionicon className="rounded-circle" fontSize="30px"
              style={{ backgroundColor:'#28a745', padding:'5px'}}
              color={'#fff'}
              icon='ios-create-outline'
              ></Ionicon>
            </a>
            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
            <a className="col-1 btn"
              onClick={() => {onDeleteItem(item)}}
            >
              <Ionicon className="rounded-circle" fontSize="30px"
              style={{ backgroundColor:'#dc3545', padding:'5px'}}
              color={'#fff'}
              icon='ios-close'
              ></Ionicon>
            </a>
          </li>
        ))
      }
    </ul>
  )
}

// eslint-disable-next-line react/no-typos
PriceList.propTypes = {
  items: PropTypes.array.isRequired,
  onModifyItem: PropTypes.func.isRequired,
  onDeleteItem: PropTypes.func.isRequired
}
PriceList.defaultProps = {
  onModifyItem : ()=>{}
}
export default PriceList